<template>
	<view>
		<view  class="view-header">请假时间</view>
		<view >
			<view >
				<view class="view-title">
					请假开始时间
				</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
			<view >
				<view class="view-title">
					请假结束时间
				</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="endDate" @change="bindEndDateChange">
						<view class="uni-input">{{endDate}}</view>
					</picker>
				</view>
			</view>
			<view >
				<view class="view-title">
					类型
				</view>
				
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="option" range-key="name">
						<view class="uni-input">{{option[index].name}}</view>
					</picker>
				</view>
			</view>
			<view>
				<view class="view-title">
					请假理由
				</view>
				<view class="textarea-wrapper" >
					<textarea v-model="reason"  placeholder="理由"/>
				</view>
			
				<view class="button-wrapper">
					<button @click="confirm">确认申请</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date:null,
				endDate:null,
				info:null,
				reason:'',
				type:'',
				option:[
					{name:'事假'},
					{name:'病假'},
					{name:'婚假'},
					{name:'丧假'},
					{name:'产假'}
				],
				index:0
			}
		},
		mounted(){
			uni.getStorage({
				key:'info',
				success: (res) => {
					let info = JSON.parse(res.data)
					this.info = info
				}
			})
		},
		methods: {
					bindPickerChange:function(e){
						this.index = e.detail.value 
					},
			       bindDateChange: function(e) {
			            this.date = e.detail.value
			        },
					bindEndDateChange: function(e) {
					     this.endDate = e.detail.value
					 },
					 confirm:function(){
					 	uni.request({
					 		url:'http://localhost:8085/api/absence/add',
							header : {'content-type':'application/x-www-form-urlencoded'},
							method:'POST',
							data:{
								user_id:this.info.user_id,
								start_time:this.date,
								end_time:this.endDate,
								type:this.option[this.index].name ,
								reason:this.reason,
								dept_id:this.info.dept_id,
								name:this.info.name
							},
							success: (res) => {
								let response = res.data
								if(response.code === 200){
									uni.showToast({
										title:'已申请',
										duration:2000
									})
								}else{
									uni.showToast({
										title:'错误',
										icon:'error'
									})
								}
							}
					 	})
					 }
		}
	}
</script>

<style>
.view-header {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin: 20px;
  padding: 20px 0;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}
.uni-list-cell-db {
	margin: 20px;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.uni-list-cell-db .uni-input {
  font-size: 16px;
  color: #666;
}
.view-title {
  border-left: 3px solid #2D9CDB;
  padding-left: 10px;
  font-size: 20px;
  margin: 20px;
}

.textarea-wrapper {
  margin: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.textarea-wrapper textarea {
  width: 100%;
  height: 150px;
  font-size: 16px;
  color: #666;
  padding: 10px;
  resize: none;
  border: none;
  outline: none;
}

.button-wrapper {
  margin: 20px auto;
  width: 50%;
}

.button-wrapper button {
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #007aff;
  border: none;
  border-radius: 5px;
  outline: none;
}

</style>
